<template>
  <div class="strut-div">
    <!-- <div class="item-top-country">
      <span class="time">时间：{{ nowDate }}</span>
      <span style="float: right;">
        <el-radio-group v-model="countryType" size="mini">
          <el-radio-button label="假日市场"></el-radio-button>
          <el-radio-button label="文旅景点"></el-radio-button>
        </el-radio-group>
      </span>
    </div> -->
    <div id="in-province-chart" style="height: 386px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import autoHover from '@/util/autoHover.js';
export default {
  components: {},
  data() {
    return {
      xData:[],
      yData:[],
      countryType: '假日市场',
      timeTicket:null,
      chart: null,
      nowDate:'',
      _date:''
    };
  },
  mounted() {
    this.nowDate = new Date().format('yyyy年mm月dd日');
    this._date = new Date().format('yyyy-mm-dd');
    this.chart = echarts.init(document.getElementById('in-province-chart'));
    this.getSourceConsumptionDetail();
  },
  methods: {
    initChart() {
      let option = {
        title: {
          text: '',
          subtext: ''
        },
        barWidth: 12,
        itemGap: 20,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: '' // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          },
          formatter: function(params) {
            var str =
              params[0].name + '<br>' + '总消费：' + params[0].data[1] + ' 元' + '<br>' + '消费数：' + params[0].data[2] + ' 笔' + '<br>' + '刷卡数：' + params[0].data[3] + ' 次';
            return str;
          }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          top: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          boundaryGap: [0, 0.01],
          axisLabel: {
            interval: 0,
            fontSize:16,
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: true
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 16
          },
          nameTextStyle: {
            fontSize: 18,
            align: 'left'
          }
        },
        series: [
          {
            name: '来源百分比',
            type: 'scatter',
            data: this.yData,
            symbolSize: function(val) {
              return val[1] / 1000;
            },
            itemStyle: {
              normal: {
                // barBorderRadius: 6,
                color: '#76F6E6',
                label: {
                  show: false, //显示文本
                  position: 'right', //数据值位置
                  textStyle: {
                    color: '#FBCC13',
                    fontSize: '16'
                  },
                  formatter: '{c}%'
                }
              }
            }
          }
        ],
        textStyle: {
          color: '#E9F4FF'
        }
      };

      setTimeout(() => {
        this.chart.setOption(option);
        this.timeTicket = autoHover.autoHover(this.chart,option,option.xAxis.data.length)
      }, 300);
    },
    getSourceConsumptionDetail() {
      let that = this;
      let _url = this.$api.getSourceConsumptionDetail;
      let _param = {
        dataSource: '07',
        objType: '01',
        fjnm: '00010001001400090001',
        type: '03',
        date:'2019-11-30',
        pageIndex:1,
        pageSize:7
      }

      this.$jquery.ajax({
        type: 'get',
        url:_url,
        dataType: 'json',
        data: _param,
        contentType:'application/json; charset=UTF-8',
        cache: false,
        success: function (res) {
          if (res.retCode === 200) {
            let data = res.retData.list;
            that.xData = data.map(item => item.region);
            that.yData = data.map((item,index) => {
              return [index,item.money,item.deals,item.cards];
            });

            that.initChart();
          }
        }
      })
    }
  },
  beforeDestroy() {
  	autoHover.stopHover(this.timeTicket);
  }
};
</script>

<style>
.item-top-country {
  padding: 10px 20px;
}
.item-top-country .time {
  font-size: 22px;
  color: #c1d0ff;
}

.item-top-country .el-radio-button--mini .el-radio-button__inner {
  font-size: 18px;
}

.item-top-country .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
  border-color: rgba(20, 180, 200, 1);
  background: linear-gradient(90deg, rgba(2, 159, 216, 1) 0%, rgba(31, 213, 189, 1) 100%);
}
.item-top-country .el-radio-button__inner:hover {
  color: rgba(20, 180, 200, 1);
}
.item-top-country .el-radio-button__inner {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(20, 180, 200, 1);
  padding: 5px 12px;
  color: #fff;
}
.item-top-country .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}
.item-top-country .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}
</style>
